<template>
	<view class="box">
		<!-- <view class="top">
			<text>PRODUCT CATEGORY</text>
			<text>产品分类</text>
		</view> -->
		<view class="list">
			<view class="item" :style="[{backgroundImage:`url(${item.pic_url})` }]" v-for="(item,index) in list"
				:key="item.id" @click="navTo(index)">
				<view class="name">{{item.subtitle}}/{{item.name}}</view>
				<!-- <view class="img">
					<image :src="item.pic_url"></image>
				</view>
				{{item.name}} -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				config: {}
			}
		},
		methods: {
			getProduct() {
				this.$request({ url: this.$api.default.cat_list }).then(res => {
					if (res.code == 0) {
						console.log(res.data.list);
						this.list = res.data.list;
					}
				});
			},
			navTo(id) {
				console.log(this.config);
				uni.setStorageSync('id', id);
				uni.navigateTo({
					url: `/pages/index/index?page_id=${this.config.product_id}`
				})
			},
			getConfig() {
				if (uni.getStorageSync('_APP_CONFIG')) {
					this.config = uni.getStorageSync('_APP_CONFIG').mall.setting;
				} else {
					setTimeout(() => {
						this.getConfig()
					}, 200)
				}
			}
		},
		created() {
			this.getConfig()
			// console.log(uni.getStorageSync('_APP_CONFIG').mall.setting);
			// this.config = uni.getStorageSync('_APP_CONFIG').mall.setting;
			this.getProduct()
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: block;
		margin: auto;
		width: 700rpx;
		height: 300rpx;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		.name{
			padding-bottom: 10rpx;
			border-bottom: 1px solid;
		}
	}

	.box {
		background-color: #fff;
	}

	.top {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		text:nth-child(1) {
			color: #999;
			font-size: 0.9em;
		}

		text:nth-child(2) {
			color: #000;
			font-size: 1em;
			font-weight: bold;
		}
	}

	// .list{
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	padding: 0upx 20upx 40upx;
	// 	.item{
	// 		width: calc(25% - 40upx);
	// 		margin: 20upx;
	// 		overflow: hidden;
	// 		font-size: 0.8em;
	// 		color: #999;
	// 		line-height: 2em;
	// 		text-align: center;
	// 		.img{
	// 			width: 100%;
	// 			height: 0;
	// 			padding-bottom:100% ;
	// 			position: relative;
	// 			overflow: hidden;
	// 			border-radius: 50%;
	// 			image{
	// 				position: absolute;
	// 				width: 100%;
	// 				height: 100%;
	// 				left: 0;
	// 				top: 0;
	// 				object-fit: cover;
	// 			}
	// 		}
	// 	}
	// }
</style>